<template>
  <div class="status-bar"
       :style="newBarStyle"></div>
</template>
<script>

export default {
  props: {
    backgroundColor: {
      type: String,
      default: ''
    }
  },

  computed: {
    newBarStyle() {
      const { backgroundColor, statusBarHeight } = this
      return {
        backgroundColor: backgroundColor || 'transparent',
        height: statusBarHeight
      }
    }
  },

  data() {
    return {
      statusBarHeight: weex.config.eros.statusBarHeight || 40
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/variables.scss";
.status-bar {
  width: 750;
  height: 40;
}
</style>
